<template>
	<view class="orderAdd">
		<uv-navbar title="编辑客户信息" titleStyle="color:#fff" leftIconColor="#fff" bgColor="#1071E7" @leftClick="leftClick"
			placeholder>
		</uv-navbar>
		<view style="width: 100%;height: 20rpx;background: #F7F8FA;"></view>
		<view class="block">
			<view class="block-title">
				客户信息
			</view>
			<view class="block-item">
				<view class="label">
					客户名称
				</view>
				<input type="text" class="ipt" v-model="formLine.connect_name" placeholder-class="styles"
					placeholder="请输入">
         <image style="width: 40rpx;height: 40rpx;" src="../../static/images/arrow.png" mode=""></image> 
			</view>
			<view class="block-item" @click="openPicker2">
				<view class="label">
					联系类型
				</view>
				<text class="styles"
					:class="connect_type_name?'ipt':''">{{connect_type_name?connect_type_name:'请选择'}}</text>
          <image style="width: 40rpx;height: 40rpx;" src="../../static/images/arrow.png" mode=""></image> 
			</view>
			<view class="block-item">
				<view class="label">
					联系方式
				</view>
	<!-- 			<input type="text" class="ipt" v-model="formLine.connect_information" placeholder-class="styles"
					placeholder="请输入"> -->
          <text class="styles ipt">{{formLine.connect_information}}</text>
			</view>
			<view class="block-item" @click="openPicker">
				<view class="label">
					客户项目
				</view>
				<text class="styles"
					:class="formLine.item_type?'ipt':''">{{formLine.item_type?formLine.item_type:'请选择'}}</text>
          <image style="width: 40rpx;height: 40rpx;" src="../../static/images/arrow.png" mode=""></image> 
			</view>
			<view class="block-item" @click="openPicker3">
				<view class="label">
					客户级别
				</view>
				<text class="styles"
					:class="formLine.customer_level?'ipt':''">{{formLine.customer_level?formLine.customer_level:'请选择'}}</text>
          <image style="width: 40rpx;height: 40rpx;" src="../../static/images/arrow.png" mode=""></image> 
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="onSave">
				确认修改
			</view>
		</view>
		<uv-picker ref="picker" :columns="columns"  @confirm="confirm"></uv-picker>
		<uv-picker ref="picker2" :columns="columns2" keyName="title" @confirm="confirm2"></uv-picker>
		<uv-picker ref="picker3" :columns="columns3"  @confirm="confirm3"></uv-picker>
	</view>
</template>

<script>
	import reqApi from "../../api/api.js";
	export default {
		data() {
			return {
				formLine: {
					connect_name: "",
					connect_type: "",
					connect_information: "",
					item_type: "",
					customer_level: ""
				},
				columns: [
					
				],
				connect_type_name: "",
				// 联系类型
				columns2: [
					[{
							title: "电话",
							id: 1
						},
						{
							title: "微信",
							id: 2
						},
						{
							title: "QQ",
							id: 3
						},
						{
							title: "其他",
							id: 4
						}
					]
				],
				// 来源
				columns3: [
					
				],
				connectType: {
					1: "电话",
					2: "微信",
					3: "QQ",
					4: "其他"
				}
			}
		},
		onLoad(option) {
			this.getDetail(option.id);
			this.userInfo = uni.getStorageSync("userInfo");
      this.getSystemConfig();
		},
		methods: {
			getDetail(id) {
				reqApi.orderDetail({
					id
				}).then(res => {
					console.log("订单详情", res);
					this.formLine = res.data;
					this.connect_type_name = this.connectType[res.data.connect_type]
				})
			},
      getSystemConfig(){
        reqApi.systemConfig({}).then(res=>{
          this.columns.push(res.data.item_type);
          this.columns3.push(res.data.customer_level);
        })
      },
			handleOk() {
				this.$refs.popup.close();
			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			onSave() {

				reqApi.customerEdit(this.formLine).then(res => {
					uni.showToast({
						title: "修改成功",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							success() {
                              uni.$emit("refreshPage", {})
							}
						})
					}, 1500)
				})
			},
			confirm(e) {
				console.log('confirm', e);
				this.formLine.item_type = e.value[0];
			},
			confirm2(e) {
				console.log('confirm', e);
        const {
        	id,
        	title
        } = e.value[0];
        this.formLine.connect_type = id;
				this.connect_type_name = title;
			},
			confirm3(e) {
				console.log('confirm', e);
				this.formLine.customer_level = e.value[0];
			},
			openPicker() {
				this.$refs.picker.open();
			},
			openPicker2() {
				this.$refs.picker2.open();
			},
			openPicker3() {
				this.$refs.picker3.open();
			}
		}
	}
</script>
<!-- placeholder-class 使用scoped不生效 -->
<style>
	.styles {
		flex: 1;
		text-align: right;
		font-family: PingFang SC, PingFang SC;
		font-size: 28rpx;
		color: #AAAAAA;
	}
</style>
<style lang="scss" scoped>
	.textarea {
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.remakeInfo {
		padding: 40rpx 0;
		box-sizing: border-box;
		border-bottom: 2rpx solid #eee;

		.remakeInfo-title {
			display: flex;
			justify-content: space-between;

			.txt1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.txt2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #969799;
			}
		}
	}

	.block {
		background: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;

		.block-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			margin-top: 36rpx;
		}

		.block-item {
			height: 104rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			border-bottom: 2rpx solid #eee;

			.label {
				color: #333333;
			}

			.ipt {
				color: #333333;
				flex: 1;
				text-align: right;
			}

		}
	}

	.dialog {
		width: 600rpx;
		padding: 48rpx 28rpx 0 28rpx;
		box-sizing: border-box;

		.dialog-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1071E7;
			text-align: center;
		}

		.dialog-warpp {
			margin: 50rpx 0;

			.dialog-warpp-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #969799;
				}

				.value {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #323233;
				}
			}
		}

		.foot-btn {
			width: 100%;
			height: 88rpx;
			background: #1071E7;
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.textareaIpt {
		width: 100%;
		padding: 24rpx 0;
		box-sizing: border-box;
		border-bottom: 2rpx solid #eee;
	}

	.block-warp {
		.block-warp-tp {
			display: flex;
			justify-content: space-between;

			.tp-fl {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #323233;
			}

			.tp-fr {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #969799;
			}
		}
	}


	.orderAdd {
		width: 100vw;
		height: 100vh;
		background: #fff;

	}
</style>
